<template>
	<view class="content">
    <view class="search">
      <uni-search-bar placeholder="请输入搜索关键词" @confirm="search" cancelButton="none" radius="28">
        <template v-slot:searchIcon>
          <text class="iconfont icon-fangdajing" style="font-size: 36rpx;"></text>
        </template>
      </uni-search-bar>
    </view>
    <view class="home-content">
      <view style="height: 112rpx;"></view>  
      <view class="" v-for="(item,index) in product" :key="index">
        <view class="time">2023.10.22</view>
        <view class="scroll-circle-item_H" @click="Detail">
          <view class="scroll-circle-img_H">
            <image src="/static/image/main.png" mode="aspectFit" class="scroll-img"></image>
            <text class="iconfont icon-zhiding scroll-view-top_H" v-show="index === 0"></text>
            <view class="opaticy">
              <text>二次元文化交流圈</text>
            </view>
          </view>
          <view class="scroll-circle-text_H u-flex">
            <view class="circle-price u-line-1">
              这里是咨迅的副标题。单行文字不可多这里是咨迅的副标题。单行文字不可多
            </view>
          </view>
        </view>
      </view>
      <view style="height: 100rpx;"></view>  
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        product:[{},{},{},{},{},],
			}
		},
		onLoad() {

		},
		methods: {
      Detail(){
        uni.navigateTo({
        	url: '/pages/Events/Latest/Latest?Name=2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会'
        });
      }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
    .home-img{
      width: 100%;
      height: 100%;
    }
    .search{
      background-color: #ffffff;
      width: 100%;
      position: fixed;
      z-index: 1;
    }
    .home-content{
      width: 100%;
      .time{
        padding: 32rpx 0;
        text-align: center;
        font-size: 24rpx;
        color: #6d6d6d;
      }
      //圈子 ---
      .scroll-circle-item_H{
        width: 100%;
        height: 354rpx;
        border-radius: 28rpx;
        padding:0 32rpx;
        .scroll-circle-img_H{
          width: 100%;
          height: 264rpx;
          min-height: 264rpx;
          position: relative;
          .scroll-view-top_H{
            position: absolute;
            bottom: 38rpx;
            left: -4rpx;
            z-index: 1;
            font-size: 72rpx;
            color: #fed500;
          }
          .opaticy{
            width: 100%;
            height: 48rpx;
            line-height: 48rpx;
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            bottom: 0px;
            color: #ffffff;
            padding: 0 24rpx;
          }
        }
        .scroll-img{
          width: 100%;
          height: 100%;
          border-top-left-radius: 28rpx;
          border-top-right-radius: 28rpx;
        }
        .scroll-circle-text_H{
          height: 80rpx;
          padding: 12rpx 12rpx 12rpx 24rpx;
          border-bottom-left-radius: 28rpx;
          border-bottom-right-radius: 28rpx;
          box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
          .circle-price{
            font-size: 24rpx;
            padding-right:10rpx;
            color: #999;
          }
        }
      }
      //圈子 ---
    }
	}
</style>
